<!-- <section class="content container-fluid"> -->
<div class="card-header">
    <div class="row">
        <div class="col-md-12">
            <filter-list request="request" callback="getList(pageIndex)"></filter-list>
        </div>       
    </div>
</div>
<div class="card-body">
    <table id="list-page" class="table table-sm table-hover sortable" cellspacing="0" ng-init="getList()">
        <thead class="thead-light">
            <tr>
                <th scope="col" style="width: 3%;">
                    <span class="fas fa-sort"></span>
                </th>
                <th scope="col" style="width: 25%;">
                    SourceId
                </th>
                <th scope="col" width="10%">
                    Type
                </th>
                <th scope="col" style="width: 10%;">
                    Alias
                </th>
                <th scope="col" width="10%">
                    Created Date
                </th>
                <th scope="col" style="width: 5%;">Actions</th>
            </tr>
        </thead>

        <tbody dnd-list="data.items" dnd-disable-if="canDrag">
            <tr ng-if="canDrag">
                <td colspan="7"><span class="text-warning" ng-bind="translate('warning_can_not_drag_drop',true, '(**Drag Drop only allow when order by priority asc)')"></span></td>
            </tr>
            <tr ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move" dnd-selected="selected = item"
                dnd-moved="updateInfos($index)" ng-class="{'selected': selected === item}">
                <td style="cursor:move;" class="drag-header">
                    <span class="fas fa-sort"></span>
                </td>                
                <td>
                    <small>
                        <span ng-bind-html="item.sourceId"></span>
                    </small>
                </td>
                <td>
                    <span ng-bind="item.type"></span>
                </td>
                <td>
                    <span ng-bind="item.alias"></span>                    
                </td>
                <td>
                    <small>
                        {{item.createdDateTime | utcToLocal}}
                    </small>
                </td>

                <td>
                    <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                        <a href="/portal/url-alias/details/{{item.id}}" class="btn btn-light">
                            <span class="fas fa-pencil-alt text-primary"></span>
                        </a>
                        <a ng-click="remove(item.id);" class="btn btn-light">
                            <span class="fas fa-times text-danger"></span>
                        </a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

</div>
<div class="card-footer">
    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end"
        a-class="page-link" paging-action="getList(page-1)" scroll-top="true"></paging>
</div>


<!-- </section> -->
